import React, { Component } from 'react'
import './css/tabBar.less'
import api from '@MODULES/common/api'
import { Link, withRouter } from 'react-router-dom'
import { TabBar, Toast } from 'antd-mobile';
import config from '@UTILS/config'
import store from 'store'
class TabBarCom extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: props.content,
            shopCartNum: 0
        }
    }
    componentDidMount() {
        api.shoppingCartProductList({}, {
            success: (data) => {
                console.log(data.list.total)
                this.setState({
                    shopCartNum: data.list.total
                })
            }
        })
    }
    render() {
        const iconArr = [
            {
                default: require('./img/tabBar/icon_jiejing_unselect.png'),
                act: require('./img/tabBar/icon_jiejing_select.png'),
                title: '捷径',
                key: 'index',
                to: '/',
            },
            {
                default: require('./img/tabBar/icon_shengji_unse.png'),
                act: require('./img/tabBar/icon_shengji_se.png'),
                title: '升级',
                key: 'purchaserecord',
                to: '/purchaserecord',
            },
            {
                default: require('./img/tabBar/icon_buhuo_unse.png'),
                act: require('./img/tabBar/icon_buhuo_se.png'),
                title: '补货',
                key: 'video',
                to: '/video',
            },
            // {
            //     default: require('./img/tabBar/icon2.png'),
            //     act: require('./img/tabBar/icon2-act.png'),
            //     title: '分类',
            //     key: 'class',
            //     to: '/classification',
            // }, 
            // {
            //     default: require('./img/tabBar/icon3.png'),
            //     act: require('./img/tabBar/icon3-act.png'),
            //     title: '购物车',
            //     key: 'shopCart',
            //     to: '/shop/cart',
            // },
            {
                default: require('./img/tabBar/icon_tuiguang_unse.png'),
                act: require('./img/tabBar/icon_tuiguang_se.png'),
                title: '推广',
                key: 'share',
                to: '/share'
            },
            {
                default: require('./img/tabBar/icon_my_unselect.png'),
                act: require('./img/tabBar/icon_my_select.png'),
                title: '我的',
                key: 'myself',
                to: '/myself'
            },
        ]
        return (
            <div>
                <div style={{
                    height: '50px'
                }}></div>
                <div className="bottomNavTabBar">
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor='#FC6484'
                        barTintColor="white"
                        hidden={this.state.hidden}
                    >
                        {
                            iconArr.map((item, index) => {
                                return <TabBar.Item
                                    icon={{ uri: item.default }}
                                    selectedIcon={{ uri: item.act }}
                                    badge={item.title === '购物车' ? this.state.shopCartNum : ''}
                                    title={item.title}
                                    key={item.key}
                                    selected={this.state.selectedTab === item.key}
                                    onPress={() => {
                                        if (item.notOpen) {
                                            Toast.fail('等待开放')
                                            return
                                        }

                                        if (item.key === 'purchase') {
                                            api.getNewPingouProduct({}, {
                                                success: (data) => {
                                                    console.log(data)
                                                    if (data.base_product_id) {
                                                        this.props.history.push('/purchase/shop/detail/' + data.base_product_id)
                                                    } else {
                                                        Toast.fail('暂无可拼购商品')
                                                    }
                                                }
                                            })
                                            return
                                        }
                                        this
                                            .props
                                            .history
                                            .push(item.to)
                                    }}
                                >
                                </TabBar.Item>
                            })
                        }

                    </TabBar>
                </div>
            </div>
        )
    }
}
export default withRouter(TabBarCom)